import axios from "axios";
import React, { useState, useEffect, use, useRef } from "react";


function App() {


    const [proList,setProList] = useState([])
    const [count,setCount] = useState(1)


    /*

    // 第一种:这样写就相当于生命周期的挂载阶段执行
    //    useEffect(()=>{
    //     axios.get('https://121.89.205.189:3000/api/pro/list')
    //     .then(res=>{
    //         setProList(res.data.data)
    //     })
    //    },[])


    // 第二种：相当于生命周期的更新阶段
    // 第二个参数是一个依赖数据，只有依赖项发生变化的时候才会重新执行 useEffect 中的代码
    useEffect(()=>{
        axios.get('https://121.89.205.189:3000/api/pro/list?count=' + count)
        .then(res=>{
            setProList(res.data.data)
        })

    // 在 useEffect 不要修改依赖项的值，不然会造成死循环 
        setCount(count+1)

    // 可以配置多个依赖项
    },[count])

   */

    // 第三种用法：全更新阶段，任何数据发生变化的时候都会执行    
    //    useEffect(()=>{ 
    //     console.log('666666666');
    //    },[])


    // 第四种：可以在 useEffect 中配置一个返回值，返回的是一个函数，
    // 通常可以在该函数中进行副作用的清除，副作用就是异步操作。该函数会在下一次执行 useEffect 之前执行

    // const timeRef =useRef(null)

    // useEffect(()=>{
    //     console.log('666666666');
        
    //     setInterval(() => {
    //         console.log('一个半小时,是三个半小时');
    //     }, 2000);
        
    //     return ()=>{
    //         // 该函数会在下一次执行 useEffect 之前被调用
    //         // 用来清除副作用的函数 - 在React中，副作用可以理解为 异步操作
    //         console.log('销毁');
    //         clearInterval(timeRef.current)
    //     }
    // })

    useEffect(() => {
        console.log('111111');
    }, [count])
    useEffect(() => {
        console.log('22222');
    }, [count])
    useEffect(() => {
        console.log('3333333');
    }, [count])


    return <div>
        <h1>App</h1>
        <button onClick={()=>setCount(count+1)}>下一页 </button>
        {proList && proList.map((item)=>{
            return <p key={item.proid}>{item.proname}</p>
        })}

    </div>
        
}


export default App